<template>
  <div>
    <div class="search-box">
      <a-input @keydown.enter="search" v-model:value="username" class="search-input" placeholder="请输入用户名"><template v-slot:prefix><UserOutlined /></template></a-input>
      <a-button type="primary" @click="search">搜索</a-button>
    </div>
    <a-table rowKey="id" :columns="columns" :data-source="data" :pagination="pagination" @change="handleTableChange">
      <template v-slot:avatar="{ text }">
        <img class="book-img" :src="$http.baseURL+'/public/pic/'+text" alt="">
      </template>
      <template v-slot:customTitle>
        <SmileOutlined /> 头像
      </template>
      <template v-slot:type="{ text }">
        {{['管理员','用户'][text]}}
      </template>
      <template v-slot:action="{ text }">
        <a-button type="primary" @click="getRecord(text)">查看借阅记录</a-button>
      </template>
    </a-table>
  </div>
</template>
<script>
const columns = [
  {
    dataIndex: 'avatar',
    slots: { title: 'customTitle',customRender: 'avatar' },
  },
  {
    title: '用户名',
    dataIndex: 'username',
  },
  {
    title: '昵称',
    dataIndex: 'nickname',
  },
  {
    title: '类型',
    dataIndex: 'type',
    slots: { customRender: 'type' },
  },
  {
    title: '操作',
    slots: { customRender: 'action' },
  },
];
export default {
  data() {
    return {
      username:'',
      data:[],
      columns,
      pagination:{
        current:1,
        pageSize: 10,
        total:0
      }
    };
  },
  methods:{
    getRecord(obj){
      this.$router.push({name:'record',params:{user:obj.username}})
    },
    handleTableChange(pagination){
      this.pagination.current = pagination.current
      this.search()
    },
    search(){
      var obj = {
        current: this.pagination.current,
        pageSize: this.pagination.pageSize,
      }
      if(this.username){
        obj.username = this.username
      }
      this.$http.get('/getUser',obj).then(_=>{
        this.data = _.data
        this.pagination.total = _.total
      })
    }
  },
  created(){
    this.search()
  }
};
</script>
<style>
.book-img{
  width: 80px;
}
</style>